<template>
	<div class="bind-dialog" v-if="showBindGroup">
		<el-dialog title="绑定技能分组" width="50%" :visible.sync="showBindGroup" :before-close="closeBindGroup" class="">
			<el-table :data="bindData.tableContent" border style="width: 100%">
				<el-table-column label="序号" prop="skillId" align="center">
					<template slot-scope="scope">
						<el-checkbox></el-checkbox>
						<span>{{ scope.row.id }}</span>
					</template>
				</el-table-column>
				<el-table-column label="技能组名称" prop="skillName" align="center">
					<template slot-scope="scope"
						><span>{{ scope.row.group }}</span></template
					>
				</el-table-column>
				<el-table-column label="技能组成员" :show-overflow-tooltip="true" prop="skillMember" align="center">
					<template slot-scope="scope"
						><span>{{ scope.row.member }}</span></template
					>
				</el-table-column>
			</el-table>
			<div class="page">
				<PageSize :pages="checkBind" @changePageSize="changePageSize" @changeCurrentPage="changeCurrentPage" />
			</div>
			<div class="btn">
				<el-button @click="closeBindGroup">保存</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import PageSize from '../components/PageSize.vue';
export default {
	components: {
		PageSize
	},
	props: {
		showBindGroup: {
			type: Boolean,
			default: () => false
		}
	},
	data() {
		return {
			bindData: {
				tableHead: [
					{
						label: '序号',
						prop: 'skillId'
					},
					{
						label: '技能组名称',
						prop: 'skillName'
					},
					{
						label: '技能组成员',
						prop: 'agentsName'
					}
				],
				tableContent: [
					{
						id: 1,
						group: '技能组1',
						member: '成员1;成员2;成员3;成员4'
					},
					{
						id: 2,
						group: '技能组2',
						member: '成员1;成员2;成员3;成员4'
					},
					{
						id: 3,
						group: '技能组3',
						member: '成员1;成员2;成员3;成员4'
					}
				]
			},
			checkBind: {
				page: 1,
				pageSize: 10,
				total: 0,
				role: ''
			}
		};
	},
	methods: {
		closeBindGroup() {
			this.$emit('closeBindGroup');
		},
		changePageSize() {
			this.$emit('changePageSize');
		},
		changeCurrentPage() {
			this.$emit('changeCurrentPage');
		}
	}
};
</script>

<style lang="less" scoped>
.bind-dialog {
	.page {
		margin-top: 20px;
	}
	.btn {
		text-align: right;
		margin-top: 20px;
		.el-button {
			background-color: #6384fe;
			color: #fff;
		}
	}
}
</style>
